<template>
  <div class="app">
    <HeaderTop @selectSearch="selectSearch" />
    <div class="sLeftSideMenu">
      <SideMenu ref="vSideMenu" :list="list" @select="select" @selectOutline="selectOutline" />
    </div>
    <div ref="eRightContent" class="sRightContent">
      <ArticleVue ref="vArticleVue" :content="articleContent" @select="selectArticleHx" />
    </div>
  </div>
</template>

<script lang="tsx">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import HeaderTop from './components/HeaderTop.vue'
import SideMenu from './components/SideMenu.vue'
import ArticleVue from './components/ArticleVue.vue'
import dataApi from './data-api'

interface RefArticleVue extends ArticleVue {
  scrollTop (id: string): void
  highlight (id: string): void
}
interface RefSideMenu extends SideMenu {
  selectOutline (id: string): void
  scrollCenter (): void
}

@Component({
  components: {
    HeaderTop,
    SideMenu,
    ArticleVue
  }
})
export default class App extends Vue {
  articleContent: string = ''
  list: Array<TypeMenuItem> = []
  async created () {
    let typeMenuList: TypeMenuItem[] = await dataApi.getTypeMenuList()
    this.list = typeMenuList
    this.initSelect()
  }
  async initSelect () {
    await this.$nextTick()
    let hash = location.hash.replace(/^#/, '')
    let params = hash.split('/')
    let name = params[0]
    let id = params[1]
    if (name) {
      name = decodeURIComponent(name)
      let vSideMenu = this.$refs.vSideMenu as RefSideMenu
      await vSideMenu.select(name)
      if (id) {
        id = decodeURIComponent(id)
        vSideMenu.selectOutline(id)
        vSideMenu.scrollCenter()
        this.selectOutline(id)
      }
    }
  }
  select (content: string) {
    this.articleContent = content
  }
  selectOutline (id: string) {
    let vArticleVue = this.$refs.vArticleVue as RefArticleVue
    vArticleVue.scrollTop(id)
    vArticleVue.highlight(id)
  }
  selectArticleHx (id: string) {
    let vSideMenu = this.$refs.vSideMenu as RefSideMenu
    vSideMenu.selectOutline(id)
    vSideMenu.scrollCenter()
  }
  async selectSearch (item: SearchResultItem) {
    let vSideMenu = this.$refs.vSideMenu as RefSideMenu
    await vSideMenu.select(item.name)
    vSideMenu.selectOutline(item.id)
    vSideMenu.scrollCenter()
    this.selectOutline(item.id)
  }
}
</script>
<style scoped>
@font-face {
  /*字体样式*/
  font-family: 'iconfont';
  src: url('~@/assets/iconfont.ttf') format('truetype');
}
.app >>> .iconfont {
  font-family: "iconfont";
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sLeftSideMenu {
  width: 300px;
  position: fixed;
  top: 64px;
  bottom: 0;
}
.sRightContent {
  /* padding: 65px 0 0 310px; */
  position: fixed;
  top: 65px;
  left: 300px;
  right: 0;
  bottom: 0;
  overflow: auto;
}
</style>
